<div class="modal fade" id="cambioNombre" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:0 !important;position:relative !important;">
            <div class="aspa" data-dismiss="modal" aria-hidden="true" style="right:-10px;top:-10px;" title="Cerrar">
                <i class="glyphicon glyphicon-remove"></i>
            </div>
            <div class="modal-header" style="background-color:#5789ad;text-align:center">
                Solicitud de cambio de nombre
            </div>
            <div class="modal-body" style="padding-bottom:0">
                <form method="post" style="width:100%" action="../logic/insertarSolicitudCambioNombre.php" onsubmit="return validarFormularioCambioNombre()">
                    ¿Por qué quieres cambiar el nombre <?php echo $datos['nombreUsuario']." ".$datos['apellidos'] ?>?
                    <textarea id="motivoCambio" name="motivoCambio" maxlength="250"  style="width:100%;height:100px;"></textarea>
                    <div style="margin-top:10px;width:100%">
                        ¿Por qué nombre lo quieres cambiar?
                    </div>
                    <div style="width:49%;float:left;margin-right:7px;">
                        <b>Nombre:</b><br>
                        <input type="text" class="input" name="nombreNuevo" id="nombreNuevo" maxlength="145">
                    </div>
                    <div style="width:49%;float:left">
                        <b>Apellidos:</b><br>
                        <input type="text" class="input" name="apellidosNuevo" id="apellidosNuevo" maxlength="145">
                    </div>
                    <div style="clear:both"></div>
            </div>
            <div class="modal-footer" style="padding:10px;text-align:center;">
                    <input type="hidden" value="<?php echo $_SESSION['uid'] ?>" name="uid">
                    <input type="submit" class="btn btn-info boton" value="Solicitar"> 
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function validarFormularioCambioNombre() {
        campo = document.getElementById("motivoCambio");
        if (campo.value == "") {
            campo.style.borderColor = "red";
            campo.style.boxShadow = "0px 0px 5px red";
            return false;
        } else {
            campo.style.borderColor = "silver";
            campo.style.boxShadow = "none";
        }
        campo = document.getElementById("nombreNuevo");
        if (campo.value == "") {
            campo.style.borderColor = "red";
            campo.style.boxShadow = "0px 0px 5px red";
            return false;
        } else {
            campo.style.borderColor = "silver";
            campo.style.boxShadow = "none";
        }
        campo = document.getElementById("apellidosNuevo");
        if (campo.value == "") {
            campo.style.borderColor = "red";
            campo.style.boxShadow = "0px 0px 5px red";
            return false;
        } else {
            campo.style.borderColor = "silver";
            campo.style.boxShadow = "none";
        }
        return true;
    }
</script>